<template>
  <div class="search">
    <div class="search-input-wrapper">
      <SearchInput v-model="query"></SearchInput>
    </div>
    <Scroll class="search-content" v-show="!query" ref="scrollRef">
      <div>
        <div class="hot-keys">
        <h1 class="title">热门搜索</h1>
        <ul>
          <li class="item" v-for="item in hotKeys" :key="item.id" @click="addQuery(item.key)">
            <span>{{ item.key }}</span>
          </li>
        </ul>
      </div>
      <div class="search-history" v-show="searchHistory.length">
        <h1 class="title">
          <span class="text">搜索历史</span>
          <span class="clear" @click="showConfirm">
            <i class="icon-clear"></i>
          </span>
        </h1>
        <Confirm ref="confirmRef" confirm-btn-text="清空" text="是否清空搜索历史" @confirm="clearSearch"></Confirm>
        <SearchList :searches="searchHistory" @select="addQuery" @delete="deleteSearch"></SearchList>
      </div>
      </div>
    </Scroll>
    <div class="search-result" v-show="query">
      <SuggestList :query="query" @select-song="selectSong" @select-singer="selectSinger"></SuggestList>
    </div>
    <router-view v-slot="{ Component }">
      <transition name="slide">
        <component :is="Component" :singer="selectedSinger" />
      </transition>
    </router-view>
  </div>
</template>
<script>
import SearchInput from '@/components/search/search-input'
import SearchList from '@/components/search/search-list.vue'
import SuggestList from '@/components/search/suggest.vue'
import Scroll from '@/components/base/scroll/scroll.vue'
import Confirm from '@/components/base/confirm/confirm.vue'
import { computed, ref, nextTick, watch } from 'vue'
import { getHotKeys } from '@/service/search'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import storage from 'good-storage'
import { SINGER_KEY } from '@/js/constant'
import useSearchHistory from '@/components/search/use-search-history'
export default {
  name: 'Search',
  components: {
    SearchInput,
    SuggestList,
    SearchList,
    Confirm,
    Scroll
  },
  setup () {
    const confirmRef = ref(null)
    const scrollRef = ref(null)
    const query = ref('')
    const hotKeys = ref([])
    const store = useStore()
    const router = useRouter()
    const selectedSinger = ref(null)

    const searchHistory = computed(() => store.state.searchHistory)

    getHotKeys().then((res) => {
      hotKeys.value = res.hotKeys
    })

    // hooks
    const { saveSearch, deleteSearch, clearSearch } = useSearchHistory()

    watch(query, (newQuery) => {
      if (!newQuery) {
        nextTick(() => {
          scrollRef.value.scroll.scroll._value.refresh()
        })
      }
    })

    function addQuery (itemKey) {
      query.value = itemKey
    }

    function selectSong (song) {
      saveSearch(query.value)
      store.dispatch('addSong', song)
    }

    function selectSinger (singer) {
      saveSearch(query.value)
      selectedSinger.value = singer
      cacheSinger(singer)
      router.push({
        path: `/search/${singer.mid}`
      })
    }

    function cacheSinger (singer) {
      storage.set(SINGER_KEY, singer)
    }

    function showConfirm () {
      confirmRef.value.show()
    }

    return {
      confirmRef,
      scrollRef,
      query,
      hotKeys,
      selectedSinger,
      searchHistory,
      deleteSearch,
      addQuery,
      selectSong,
      selectSinger,
      clearSearch,
      showConfirm
    }
  }
}
</script>
<style lang="scss" scoped>
.search {
  position: fixed;
  width: 100%;
  top: 3.752665rem;
  bottom: 0;
  display: flex;
  flex-direction: column;
  .search-input-wrapper {
    margin: 0.852878rem;
  }
  .search-content {
    flex: 1;
    overflow: hidden;
    .hot-keys {
      margin: 0 0.852878rem 0.852878rem 0.852878rem;
      .title {
        margin-bottom: 0.852878rem;
        font-size: $font-size-medium;
        color: $color-text-l;
      }
      .item {
        display: inline-block;
        padding: 0.21322rem 0.426439rem;
        margin: 0 0.852878rem 0.426439rem 0;
        border-radius: 0.255864rem;
        background: $color-highlight-background;
        font-size: $font-size-medium;
        color: $color-text-d;
      }
    }
    .search-history {
        position: relative;
        margin: 0 .852878rem;
        .title {
          display: flex;
          align-items: center;
          height: 1.705757rem;
          font-size: $font-size-medium;
          color: $color-text-l;
          .text {
            flex: 1;
          }
          .clear {
            @include extend-click();
            .icon-clear {
              font-size: $font-size-medium;
              color: $color-text-d;
            }
          }
        }
      }
  }
  .search-result {
    flex: 1;
    overflow: hidden;
  }
}
</style>
